import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Card } from 'antd'
import './App.css'

import { FormattedMessage } from 'react-intl'

import {
    ClockCircleOutlined,
    ClusterOutlined,
    DesktopOutlined,
    UserOutlined
} from '@ant-design/icons'

export default class BaseMonitor extends Component {

    constructor(props) {
        super(props)

        let {
            time,
            uptime,
            user,
            hostname,
            ip,
            port
        } = this.props

        this.state = {
            time,
            uptime,
            user,
            hostname,
            ip,
            port
        }
    }

    componentDidMount() {
        //动态更新time和uptime
        this.Inter = setInterval(() => {
            let { time, uptime } = this.state
            time += 1
            uptime += 1
            this.setState({
                time,
                uptime
            })
        }, 1000)
    }

    //将Uptime转换成易读格式
    formatUptime = (t) => {
        let day = parseInt(t / 86400)
        let s = t - (day * 86400)
        let h = parseInt(s / 3600)
        s -= h * 3600
        let m = parseInt(s / 60)
        s -= m * 60

        //当数值小于10时，在前面加"0"
        h = (h < 10) ? "0" + h : h;
        m = (m < 10) ? "0" + m : m;
        s = (s < 10) ? "0" + s : s;
        return day + "days " + h + ":" + m + ":" + s
    }

    render() {
        return (
            <Fragment>
                <Card className="stateCard">
                    <Card.Meta
                        avatar={
                            <ClockCircleOutlined />
                        }
                        title={<FormattedMessage id="DateTime" />}
                        description={moment(parseInt(this.state.time * 1000)).format("YYYY-MM-DD HH:mm:ss")}
                    />
                </Card>

                <Card className="stateCard">
                    <Card.Meta
                        avatar={
                            <DesktopOutlined />
                        }
                        title={<FormattedMessage id="Uptime" />}
                        description={this.formatUptime(this.state.uptime)}
                    />
                </Card>

                <Card className="stateCard">
                    <Card.Meta
                        avatar={
                            <UserOutlined />
                        }
                        title={<FormattedMessage id="User" />}
                        description={this.state.user + "@" + this.state.hostname}
                    />
                </Card>

                <Card className="stateCard">
                    <Card.Meta
                        avatar={
                            <ClusterOutlined />
                        }
                        title={<FormattedMessage id="Web" />}
                        description={this.state.ip + ":" + this.state.port}
                    />
                </Card>

            </Fragment>
        )
    }
}

BaseMonitor.propTypes = {
    time: PropTypes.number.isRequired,
    uptime: PropTypes.number.isRequired,
    user: PropTypes.string.isRequired,
    hostname: PropTypes.string.isRequired,
    ip: PropTypes.string.isRequired,
    port: PropTypes.string.isRequired,
}
